<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <input type="text" v-model="name">
        <input type="text" v-model="password">
        <button @click="handleClick">登录</button>
        <button @click="handleLogout">退出</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.9.0/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
    <script>
       new Vue({
           el: '#root',
           data() {
               return {
                   name: "admin@163.com",
                   password: "123456"
               }
           },
           mounted() {
               console.log(localStorage.getItem("access_token"))
           },
           methods: {
               async handleClick() {
                  let res = await axios.request({
                       url: 'http://localhost:3000/admin/auth/sign_in',
                       method: "POST",
                       data: {
                           login: this.name,
                           password: this.password
                       }
                   })
                   console.log(res)
                   localStorage.setItem("access_token", res.data.data.token)
               },
               handleLogout() {
                   localStorage.removeItem("access_token")
               }
           }
       })
    </script>
</body>
</html>